<template>
  <div>
    <div v-if="dialogVisible">
    <h3 style="text-align: center">{{title}}</h3>
    <el-row>
<!--      <el-col :span="24">
        <el-steps :active="step" simple finish-status="success">
          <el-step title="获取方式信息"></el-step>
          <el-step title="存储方式信息"></el-step>
        </el-steps>
      </el-col>-->
      <el-col class="col-top">

        <el-form ref="elForm" style="max-height: 600px;overflow: auto;margin-top: 10px" :rules="rules" :model="formData" size="medium" label-width="100px"
                 label-position="right">
          <el-row>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入转换器名称" show-word-limit clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="获取规则" prop="fromtype">
                <el-select v-model="formData.fromtype"  placeholder="请选择获取规则" clearable
                           :style="{width: '98%'}">
                  <el-option v-for="(item, index) in types" :key="index" :label="item.code"
                             :value="item.id" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="存储规则" prop="totype">
              <el-select v-model="formData.totype" placeholder="请选择存储规则" clearable
                         :style="{width: '98%'}">
                <el-option v-for="(item, index) in types" :key="index" :label="item.code"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-tabs v-model="activeName"  :stretch="true" >
                <el-tab-pane   name="second">
                  <span slot="label"><span style="color: red">* </span><span :style="{color:isProvider?'red':''}">获取规则配置</span></span>
                  <VueDataEditor
                    @input="codeChangeProvider"
                    :value="provider"
                    :disable="false"
                    :width="'100%'"
                    :height="'300px'"
                  ></VueDataEditor>

                </el-tab-pane>

                <el-tab-pane  name="first">
                  <span slot="label"><span style="color: red">* </span><span :style="{color:isReceivers?'red':''}">存储规则配置</span></span>
                  <VueDataEditor
                    @input="codeChangeReceivers"
                    :value="receivers"
                    :disable="false"
                    :width="'100%'"
                    :height="'300px'"
                  ></VueDataEditor>

                </el-tab-pane>

              </el-tabs>
            </el-col>

<!--            <el-col :span="12" style="text-align: center">
              <el disabled >获取规则配置</el>
              <VueDataEditor
                @input="codeChangeProvider"
                :value="provider"
                :disable="false"
                :width="'100%'"
                :height="'300px'"
              ></VueDataEditor>
            </el-col>
            <el-col :span="12" style="text-align: center">
              <el disabled>存储规则配置</el>
              <VueDataEditor
                @input="codeChangeReceivers"
                :value="receivers"
                :disable="false"
                :width="'100%'"
                :height="'300px'"
              ></VueDataEditor>
            </el-col>-->
          </el-row>


          <el-form-item class="col-top item" style="text-align: right;margin-top: 10px;margin-bottom: 5px">
            <el-button  @click="close">返回</el-button>
            <el-button type="primary" @click="dataFormSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    </div>
  </div>
</template>
<script>
import VueDataEditor from "@/page/vue_data_editor/vue_data_editor.vue";
export default {
  components: {
    VueDataEditor
  },
  inheritAttrs: false,

  props: [],
  data() {
    return {
      isProvider:false,
      isReceivers:false,
      flag:'<?xml version=\"1.0\" encoding=\"UTF-8\"?>',
      activeName: 'second',
      rules:{
        name: [{ required: true, message: '转换器名称不能为空', trigger: 'blur' }],
        fromtype: [{ required: true, message: '请选择获取规则', trigger: 'blur' }],
        totype: [{ required: true, message: '请选择存储规则', trigger: 'blur' }],
      },

      title:"添加转换器",
      // 双向绑定的值
      provider:'<?xml version="1.0" encoding="UTF-8"?>',
      receivers:'<?xml version="1.0" encoding="UTF-8"?>',
      dialogVisible:true,
      disable: false,
      formData: {
        id:"",
        name:"",
        fromtype:"",
        providerxml:"",
        totype:"",
        receiversxml:""
      },
      types:[]
    }
  },
  created() {
    this.formData.fromtype=115
    this.formData.totype=115
  },
  methods: {
    // 子组件传递过来的最新值的方法
    codeChangeProvider(event) {
      this.provider = event;
    },
    codeChangeReceivers(event) {
      this.receivers = event;
    },
    // 打印
    update() {
      console.log(this.code);
    },
    // 表单提交
    dataFormSubmit() {
      var aa=this.receivers.replace(/(\r\n|\n|\r)/gm, "<br/>");
      if(this.provider===this.flag){
        this.isProvider=true
        this.isReceivers=false
        this.$message({
          message: '请配置获取规则',
          type: 'error',
          duration: 1500,
        })
      }else if(this.receivers===this.flag){
        this.isReceivers=true
        this.isProvider=false
        this.$message({
          message: '请配置存储规则',
          type: 'error',
          duration: 1500,
        })
      }else {
        this.isReceivers=false
        this.isProvider=false
        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/tbssbustranslator/saveOrupdate'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.formData.id,
                'fromtype': this.formData.fromtype,
                'name': this.formData.name,
                'totype': this.formData.totype,
                'providerxml': this.provider.replace(/(\r\n|\n|\r)/gm, ""),
                'receiversxml': this.receivers.replace(/(\r\n|\n|\r)/gm, "")
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                })
                this.close();
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    },
    getTypes(){
      this.$http({
        url: this.$http.adornUrl('/tbssbuschannel/dbtype'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.types = data.date;
        }
      })
    },
    init(id){
      this.isProvider=false
      this.isReceivers=false
      if(id){
        this.title="修改转换器"
        this.$http({
          url: this.$http.adornUrl('/tbssbustranslator/getById/'+id),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.formData=data.data;
            this.provider=data.data.providerxml;
            this.receivers=data.data.receiversxml;
          }else {
            this.$message.error(data.msg);
          }
        })
      }
      this.getTypes();
      this.dialogVisible=true;
    },
    close() {
      var data = false;
      this.$emit("handleClose", data)
    }
  }
}

</script>
<style>
</style>
